web development

What are pop-ups?

Pop-ups are notification windows that are used to inform or persuade a user to do something. Pop-ups can be useful to users or cause them inconvenience. The sudden presence of pop-ups for advertising can cause inconvenience to users. Most pop-up notification windows are used to persuade users to advertise, but websites are not the only place to use pop-ups. Pop-ups can also be used in mobile applications to inform users or encourage them to do something.

What are the types of pop-ups and what are they used for?

There are different types of pop-ups and they can be used in different places according to their type. The types of pop-ups and their applications are as follows:

- Pop-ups
- Overlays
- Modals
- Interstitials
- Full screen pop-up
- Floating pop-up
- Click pop-up
- Scroll pop-up
- Timed pop-up

Modals pop-ups:

These types of pop-ups are pop-ups that open as a box on the same page and of course do not cover the entire page. These types of pop-ups are usually opened at the request of the user. Modals are used to persuade the user to complete the form, register, log in and press the OK button.

The feature of these pop-ups that makes them unique is that by opening this type of pop-up, other page activities become locked and impossible, and the use of other pop-ups until the user closes or approves the pop-up box. Lock screen features will be impossible. In other words, the appearance of this type of pop-up causes other parts of the page to be disabled.

Scroll pop-up:

These types of pop-ups are shown to the user when they scroll to a specific part of the page. In other words, by designing and creating a scrolling pop-up, you specify that the user be displayed to the user when scrolling and reaching a certain part of the page.

Timed pop-ups:

These types of pop-ups are also timed and are displayed to the user over time. For example, a pop-up is displayed after one minute of the user"s presence. Timed pop-ups are mostly used for ads that appear on the site and application page after a period of time after the user is on the page, to advertise and persuade the user to buy.

These types of pop-ups can both appear in applications and can be displayed on sites. Pop-up ads can appear on both apps and sites.

Advantages of using pop-ups:

- Attract users" attention
- Obtain user information such as email, phone number, personal details and ...
- Encourage users to communicate and interact
- Informing users of very important information
- Remind and provide important content to users
- Make it possible to fulfill user requests

In addition to the above tips and benefits, pop-ups also cause distraction, annoyance to users, inconvenience and reduce the user experience.

Requirements for designing Modals pop-ups in applications for iOS operating systems and platforms in Visual Studio on Mac OS:

- To create applications with pop-ups on the platform and the iOS operating system, you need a Mac operating system that has also made the necessary settings to connect to your Windows system so that you can see the result and output.

- Visual Studio for Mac latest version, support platform for Android and iOS platforms and finally Xcode latest version installed on your system.

Tip:

To learn step by step how to build an application on the iOS platform and make the necessary settings for the Mac system, how to build the first Xamarin.Forms App ? Follow.

- Open Visual Studio for Mac and create a file with the new black Xamarin.Forms app type, it is better to be careful in choosing the project name and put the names related to the project. In this article, we are going to name the project PopupsTutorial. Of course, your application must support and use the standard .NET feature and mechanism so that you can share code on different platforms.

Note:

Be sure to include the solution name in this section of PopupsTutorial, otherwise you may encounter an error while coding.

Double-click on MainPage.xaml in the Solution Explorer page to open a page where you can write and insert pop-up codes.

It is better to delete all the codes in the opened page and enter the following codes in that page.

<! -? xml version = "1.0" encoding = "utf-8"? ->

<contentpage xmlns = "http://xamarin.com/schemas/2014/forms" xmlns: x = "http://schemas.microsoft.com/winfx/2009/xaml" x: class = "PopupsTutorial.MainPage">
<stacklayout margin = "20,35,20,20">
<button text = "Display alert" clicked = "OnDisplayAlertButtonClicked">
</button> <button text = "Display alert question" clicked = "OnDisplayAlertQuestionButtonClicked">
</button></stacklayout> </contentpage>

By inserting this code in the opened page, you actually define and create a user interface that includes two objects and the button element and StackLayout. To insert the appropriate text that will be displayed on the button, you must write and place the text you want in the Button.Text attribute, so that the desired text is displayed on the button. To define and determine the event that you can select and click the button, you can use the Clicked event, which includes the event handler, and define and specify the event that you want to be done by the user after clicking the button in the pop-up box.

- This time, open MainPage.xaml in the PopupsTutorial project and add the following code, which includes the event handlers OnDisplayAlertButtonClicked and OnDisplayAlertQuestionButtonClicked.

async void OnDisplayAlertButtonClicked (object sender, EventArgs e)
{
await DisplayAlert ("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked (object sender, EventArgs e)
{
bool response = await DisplayAlert ("Save?", "Would you like to save your data?", "Yes", "No");
Console.WriteLine ("Save data:" + response);
}

This code, which is written to activate when a button is pressed, is written to the event handler method of the button. It calls the OnDisplayAlertButtonClicked method, and this method also calls the DisplayAlert method. modal alert, which includes a cancel button, is created by the methods called in this piece of code, so that the user can use other parts of the page and the application until the alert is resolved, approved or rejected. In other words, this piece of code creates a warning for the user, which includes a button and the text written on the button is the word cancel, and the user can continue his activity with the application by removing this warning box.

Next, the OnDisplayAlertQuestionButtonClicked method calls an overload of the DisplayAlert method to create an alert box. This alert box, which is created using these methods in the next part of the code snippet, contains two buttons. The text written on the buttons is accept and cancel. According to the warning box that will be displayed, the user can select and click between the cancel and accept buttons to perform the desired operation, the selection of one of these two buttons will be returned as Boolean.

- To run the built application and test it in the emulator in the system, you can press the button in Visual Studio located in the toolbar or use the key combination Ctrl + F5. Then select and click the first button that appears. After the first alert is removed in the alert box, the second alert will appear for you, which has two accept and cancel buttons.

Requirements for designing pop-up action sheets in applications for the Android operating system and platform in Visual Studio on the Mac operating system:

In Xamarin.Forms there is a type of pop-up modal called action sheet, this type of pop-up is like modal pop-up and is used to guide the user to do a task. In this part of the tutorial, the DisplayActionSheet method in the Page class is used to display an action sheet that guides the user to perform a task.

1- Enter the MainPage.xaml path.
2- In MainPage.xaml, create a Button to display the action sheet.
3- Enter the following code in the path traveled.

<button text = "Display action sheet" clicked = "OnDisplayActionSheetButtonClicked">
</button>

1- Button.Text is the text that is displayed on the button and is usually selected according to the function of the text button. Enter the appropriate text with the button function in the Button.Text attribute.
2- Create an event handler to determine the behavior after clicking the Clicked event button.
3- Name the event handler OnDisplayActionSheetButtonClicked.
4- Open the MainPage.xaml file in the PopupsTutorial project from the Solution Pad.
5- In this section, double click on MainPage.xaml.cs to open it.
6- Next, create an event handler for OnDisplayActionSheetButtonClicked by adding the following code and add it to the class.

async void OnDisplayActionSheetButtonClicked (object sender, EventArgs e)
{
string action = await DisplayActionSheet ("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
Console.WriteLine ("Action:" + action);
}

Clicking the Button calls the OnDisplayActionSheetButtonClicked method and executes it. The OnDisplayActionSheetButtonClicked method calls up the DisplayActionSheet method to provide some help to guide the user in the task. Selecting this button will return the answer and help in the form of String.

1 Click the start option to see the result and its output in your simulators.

You have successfully completed these activities in this part of the training:

Create a security alert that asks the user to make a selection.Create an action sheet that guides the user to perform a task.

Source: https://www.dotnek.com/Blog/Apps/create-pop-ups-in-xamarinforms-for-mac